<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 忽略将页面中的数字识别为电话号码 -->
    <meta name="format-detection" content="telephone=no">
    <!-- 忽略Android平台中对邮箱地址的识别 -->
    <meta name="format-detection" content="email=no">
    <!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- ios7.0版本以后，safari上已看不到效果 -->
    <!-- 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 可选default、black、black-translucent -->
    <title>HTTP-请求-插件</title>
    <link rel="icon" href="/favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/element-ui.css">
    <link rel="stylesheet" href="/css/index.css">
    <style>
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-container>
            <el-header>HTTP-请求-插件</el-header>
            <el-container>
                <el-aside :width="asideWidth+'px'">
                    <div class="divider el-drawer" v-resizeable="{ ele: '.el-aside', min: 300, max: 500, that}"></div>
                    <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable></el-input>
                    <el-tree node-key="id" ref="tree" :data="dataList" :filter-node-method="filterNode" @node-click="handleNodeClick"
                        highlight-current :expand-on-click-node="false" :show-checkbox="false" :props="defaultProps">
                        <div class="custom-tree-node" slot-scope="{ node, data }">
                            <span class="ib custom-tree-node-label">{{ node.label }}</span>
                            <span class="ib custom-tree-node-delete">
                                <el-popconfirm cancel-button-text="不用了" icon="el-icon-info" icon-color="red"
                                    title="确定删除吗？" @confirm="() => remove(node, data)">
                                    <el-button type="text" slot="reference">&times;</el-button>
                                </el-popconfirm>
                            </span>
                        </div>
                    </el-tree>
                </el-aside>
                <el-main>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <el-input placeholder="接口名" v-model="selectInterface.name" clearable></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="24" class="row2">
                            <el-select v-model="selectInterface.config.method" placeholder="请选择方式" style="min-width: 100px;">
                                <el-option v-for="item in methods" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                            <el-input style="margin:0 20px;" placeholder="请输入接口地址" v-model="selectInterface.config.url" clearable></el-input>
                            <el-button type="primary">发送</el-button>
                        </el-col>
                    </el-row>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="请求头" name="http-header">
                            
                        </el-tab-pane>
                        <el-tab-pane label="请求参数" name="http-params">
                            <el-row :gutter="10">
                                <el-col :span="24">
                                    <el-radio-group v-model="selectInterface.config.paramType">
                                        <el-radio label="x-www-form-urlencoded;charset=UTF-8"></el-radio>
                                        <el-radio label="application/json"></el-radio>
                                        <el-radio label="application/xml"></el-radio>
                                        <el-radio label="text/plain"></el-radio>
                                      </el-radio-group>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    
                                </el-col>
                                <el-col :span="24">
                                    <el-input class="params-box" type="textarea" v-model="selectInterface.config.params" :autosize="{ minRows:10, maxRows:10 }" :rows="10"></el-input>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                      </el-tabs>
                </el-main>
            </el-container>
        </el-container>
    </div>
    <script src="/js/vue.min.js"></script>
    <script src="/js/element-ui.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/http.js"></script>
    <script src="/js/index.js"></script>
</body>

</html>